<template>
  <div v-for="item in list" class="mb-[20px] w-[44vw]">
    <div @click="detail(item)" class="w-full rounded-[10px] relative bg-white"
      style="box-shadow: 0px 1px 4px 0px rgba(176, 176, 176, 0.15)">
      <div class="w-full h-[110px] rounded-t-[10px]">
        <img :src="item.banner" alt="" class="h-[110px] rounded-t-[10px] w-full" />
      </div>
      <div class="p-[10px]">
        <div class="text-[14px] w-[110px]  bg-[#EF6800]  text-white rounded-[5px] pl-[10px] mb-[5px]"
          v-if="Number(item.user_rate) > 0">
          推广费:{{ item.user_rate }}%
        </div>
        <div class="text-[14px] w-[140px] whitespace-nowrap overflow-hidden text-ellipsis">
          {{ item.name }}
        </div>
        <div>
          <span class="text-[#EF6800] font-bold">{{ item.price }}</span><span class="text-[10px]">元/起</span>
        </div>
      </div>
      <div class="absolute top-0 left-0">
        <div class="h-[28px] bg-[#EF6800] flex items-center justify-center text-[12px] text-white px-[5px]"
          style="border-radius: 10px 0px 10px 0px">
          {{ item.brand }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps, toRef } from "vue";
const props = defineProps({
  list: { type: Array<listType> },
});

const list = toRef(props, "list");

const detail = (item: any) => {
  window.location.href = "/h5/detail?id=" + item.id;
  // router.push("/h5/detail?id=" + item.id);
};
</script>
